<template>
   <div class="">
        <div class="p-4">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item label="名称关键字">
                    <el-input v-model="searchParams.nameKeyword" placeholder="名称关键字" clearable />
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="getList">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="mt-3 mb-3">
            <el-button type="primary" icon="Plus" @click="add">新增</el-button>
            <!-- <el-button type="primary" icon="Edit" @click="edit">编辑</el-button> -->
            <el-button type="danger" icon="Delete" @click="bachRemove">批量删除</el-button>
        </div>
        <div class="mt-3 w-full flex">
            <el-table ref="tableRef" :data="data" border style="width: 100%">
                <el-table-column align="center" type="selection" :selectable="selectable" width="55" />
                <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="60" />
                <el-table-column align="center" fit v-for="(item,index) in columns" :key="index" :prop="item.key" :label="item.title" :formatter="item.formatter" :width="item.width"/>
                <el-table-column fixed="right" label="操作栏" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="mt-3">
            <el-pagination
                v-model:current-page="searchParams.pageNumber"
                v-model:page-size="searchParams.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalRow"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <!-- 新增与编辑 弹窗 -->
        <el-dialog v-model="addDialog" :title="isAdd?'添加':('编辑员工： '+ editItem.userName)" width="40%" center>
            
            <!-- 编辑表单信息 -->
            <el-form
                label-width="auto"
                ref="editItemRef"
                :model="editItem"
                :rules="editItemRules"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="editItem.roleName" clearable/>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editItem.content" type="textarea" :rows="2" show-word-limit maxlength="200" clearable/>
                </el-form-item>
                <!-- <el-form-item label="联系电话" prop="userTele">
                    <el-input v-model="editItem.userTele" clearable/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="editItem.sex" placeholder="选择性别" clearable>
                        <el-option label="男" value="男"/>
                        <el-option label="女" value="女"/>
                        <el-option label="保密" value="保密"/>
                    </el-select>
                </el-form-item> -->
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addDialog = false">取消</el-button>
                    <el-button type="primary" @click="save(editItemRef)">保存</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 操作提示弹框 -->
         <el-dialog v-model="openDialog" title="操作提示" width="40%" center>
            <span class="m-t-10 m-b-10">{{ openDialogTitle }}</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="openDialog = false">取消</el-button>
                    <el-button type="primary" @click="confirm">确认</el-button>
                </div>
            </template>
        </el-dialog>
   </div>
</template>


<script setup>
import { indexMethod } from '@/config/utils';
import { ref } from 'vue';

import { getShopRoles, addShopRole  } from '@/config/api'

//搜索条件
const totalRow = ref(0)
const searchParams = ref({
    pageNumber: 1,
    pageSize: 10
})


//表格数据
const tableRef = ref()
const data = ref([])
//表格数据列名称
const columns = ref([
    {
        key: 'roleName',
        title: '角色名称',
    },
    {
        key: 'content',
        title: '备注',
    },
    {
        key: 'createTime',
        title: '创建时间',
    },
    {
        key: 'createName',
        title: '创建人',
    },
    {
        key: 'updateTime',
        title: '更新时间',
    },
    {
        key: 'updateName',
        title: '更新人',
    }
])
const selectable = ref()
//获取数据
function getList(){
    //执行查询数据
    getShopRoles(searchParams.value).then(res => {
        if(res.code == 200){
            data.value = res.data.records
            totalRow.value = res.data.totalRow
        }
    })
}
//分页参数处理
const handleSizeChange = (e) => {
    searchParams.value.pageSize = e
    getList()
}
const handleCurrentChange = (e) => {
  searchParams.value.pageNumber = e
  getList()
}
getList()

//新增与编辑功能
const editItem = ref({})
const addDialog = ref(false)
const editItemRef = ref()

const editItemRules = ref({
    roleName: [
        {required: true, message: '角色名称必填', trigger: 'blur'}
    ]
})
const isAdd = ref(true)

//新增功能
const add = () => {
    addDialog.value = true
}
//编辑功能
const edit = (item) => {
    // const list = tableRef.value.getSelectionRows();
    // console.log('选中的数据 ==> {}', list);
    // if(list.length <= 0){
    //     ElMessage.error('请先选择要操作的数据')
    //     return
    // }
    // if(list.length > 1){
    //     ElMessage.error('编辑角色信息, 只能单条操作，不能批量处理')
    //     return
    // }
    // const item = list[0]
    addDialog.value = true
    editItem.value.id= item.id
    editItem.value.roleName= item.roleName
    editItem.value.content= item.content
}

//保存信息
const save = (itemRef) => {
    if (!itemRef) return
    itemRef.validate((valid) => {
        if (valid) {
            // ElMessage.success('表单校验通过')
            addShopRole(editItem.value).then(res => {
                if(res.code == 200){
                    addDialog.value = false
                    ElMessage.success('添加成功')
                    getList();
                }
            })
        } else {
            ElMessage.error('表单校验未通过')
        }
    })
}




//删除
const openKind = ref({})
const openDialog = ref(false)
const openDialogTitle = ref('')
const openItem = ref({})
//单条删除
const del = (item) => {
    openDialog.value = true
    openKind.value = 1
    openDialogTitle.value = "确认要删除角色：" + item.roleName + " ?"
    openItem.value = item
}
//批量删除
const bachRemove = () => {
    const list = tableRef.value.getSelectionRows();
    console.log('选中的数据 ==> {}', list);
    if(list.length <= 0){
        ElMessage.error('请先选择要操作的数据')
        return
    }
    openDialog.value = true
    openKind.value = 2
    openDialogTitle.value = "确认要删除选中的数据？"
}

//提交确认信息
const confirm = () => {
    if(openKind.value == 1){
        console.log('删除了 ==> {}', openItem.value.roleName);
    }
    else if(openKind.value == 2){
        const list = tableRef.value.getSelectionRows();
        const ids = list.map(item => item.id);
        const names = list.map(item => item.roleName);
        console.log('执行批量删除 ==> {}', ids);
        console.log('执行批量删除 ==> {}', names);
    }
    openDialog.value = false
}
</script>


<style scoped>

</style>